<template>
	<div class="home">
		<el-row :gutter="50" class="home-huizong">
			<el-col :span="8">
				<el-card class="box-card">
					<el-row :gutter="50">
						<el-col :span="16">
							<h1 class="title">电话拨打数量</h1>
							<span class="num">{{home.total_duration}}</span>
						</el-col>
						<el-col :span="8">
							<img src="../../assets/images/1.png" />
						</el-col>
					</el-row>
				</el-card>
			</el-col>
			<el-col :span="8">
				<el-card class="box-card">
					<el-row :gutter="50">
						<el-col :span="16">
							<h1 class="title">微信好友增加数量</h1>
							<span class="num">{{home.total_friend}}</span>
						</el-col>
						<el-col :span="8">
							<img src="../../assets/images/2.png" />
						</el-col>
					</el-row>
				</el-card>
			</el-col>
			<el-col :span="8">
				<el-card class="box-card">
					<el-row :gutter="50">
						<el-col :span="16">
							<h1 class="title">朋友圈发布数量</h1>
							<span class="num">{{home.total_moment}}</span>
						</el-col>
						<el-col :span="8">
							<img src="../../assets/images/3.png" />
						</el-col>
					</el-row>
				</el-card>
			</el-col>
		</el-row>

		<el-row :gutter="50" class="home-huizong">
			<el-col :span="8">
				<el-card class="box-card">
					<el-row :gutter="50">
						<el-col :span="16">
							<h1 class="title">群发数量</h1>
							<span class="num">{{home.total_mass}}</span>
						</el-col>
						<el-col :span="8">
							<img src="../../assets/images/4.png" />
						</el-col>
					</el-row>
				</el-card>
			</el-col>
			<el-col :span="8">
				<el-card class="box-card">
					<el-row :gutter="50">
						<el-col :span="16">
							<h1 class="title">客户回复数量</h1>
							<span class="num">{{home.total_mass_reply}}</span>
						</el-col>
						<el-col :span="8">
							<img src="../../assets/images/5.png" />
						</el-col>
					</el-row>
				</el-card>
			</el-col>
			<el-col :span="8">
				<el-card class="box-card">
					<el-row :gutter="50">
						<el-col :span="16">
							<h1 class="title">客户成交数量</h1>
							<span class="num">{{home.total_deal}}</span>
						</el-col>
						<el-col :span="8">
							<img src="../../assets/images/6.png" />
						</el-col>
					</el-row>
				</el-card>
			</el-col>
		</el-row>
		<!--   表格     -->
		<el-tabs type="border-card" class="grid-list">
			<el-tab-pane label="客户跟踪表">
				<el-table :data="home.customers" border style="width: 100%">
					<el-table-column prop="customer_name" label="客户姓名">
					</el-table-column>
					<el-table-column prop="phone" label="客户电话">
					</el-table-column>
					<el-table-column prop="corporate_name" label="公司名称">
					</el-table-column>
					<el-table-column prop="customer_address" label="公司地址">
					</el-table-column>
					<el-table-column prop="date" label="创建时间">
						<template slot-scope="scope">
							<span>{{scope.row.add_time | dateFilter}}</span>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
		</el-tabs>

		<el-tabs type="border-card" class="grid-list">
			<el-tab-pane label="记事本">
				<el-table :data="home.notepads" border style="width: 100%">
					<el-table-column label="所属用户" width="180">
						<template slot-scope="scope">
							<span>{{scope.row.user.account}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="title" label="标题">
					</el-table-column>
					<el-table-column prop="create_time" label="创建时间">
					</el-table-column>
					<el-table-column label="完成状态">
						<template slot-scope="scope">
							<span v-if="scope.row.status == 0">
								<el-tag type="warning">未完成</el-tag>
							</span>
							<span v-else>
								<el-tag type="success">已完成</el-tag>
							</span>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
		</el-tabs>
		
		<el-tabs type="border-card" class="grid-list">
			<el-tab-pane label="我收到的站内信">
				<el-table :data="home.my_letters" border style="width: 100%">
					<el-table-column prop="title" label="任务名称" width="180">
					</el-table-column>
					<el-table-column prop="name" label="责任人" width="180">
					</el-table-column>
					<el-table-column prop="content" label="主要内容" width="280">
					</el-table-column>
					<el-table-column prop="state" label="任务状态" width="180">
					</el-table-column>
					<el-table-column prop="date" label="发布时间">
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="我发送的站内信">
				<el-table :data="home.send_letters" border style="width: 100%">
					<el-table-column prop="title" label="任务名称" width="180">
					</el-table-column>
					<el-table-column prop="name" label="责任人" width="180">
					</el-table-column>
					<el-table-column prop="content" label="主要内容" width="280">
					</el-table-column>
					<el-table-column prop="state" label="任务状态" width="180">
					</el-table-column>
					<el-table-column prop="date" label="发布时间">
					</el-table-column>
				</el-table>
			</el-tab-pane>
		</el-tabs>

		<el-tabs type="border-card" class="grid-list">
			<el-tab-pane label="我的任务">
				<el-table :data="home.liable_tasks" border style="width: 100%">
					<el-table-column prop="title" label="任务名称" width="180">
					</el-table-column>
					<el-table-column prop="name" label="责任人" width="180">
					</el-table-column>
					<el-table-column prop="content" label="主要内容" width="280">
					</el-table-column>
					<el-table-column prop="state" label="任务状态" width="180">
					</el-table-column>
					<el-table-column prop="date" label="发布时间">
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="我发布的任务">
				<el-table :data="home.send_tasks" border style="width: 100%">
					<el-table-column prop="title" label="任务名称" width="180">
					</el-table-column>
					<el-table-column prop="name" label="责任人" width="180">
					</el-table-column>
					<el-table-column prop="content" label="主要内容" width="280">
					</el-table-column>
					<el-table-column prop="state" label="任务状态" width="180">
					</el-table-column>
					<el-table-column prop="date" label="发布时间">
					</el-table-column>
				</el-table>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					mobile: '13712345678',
					laiyuan: 'QQ',
					jieduan: '洽谈',
				}, {
					date: '2016-05-04',
					name: '王小虎',
					mobile: '13712345678',
					laiyuan: '微信',
					jieduan: '意向',
				}, {
					date: '2016-05-01',
					name: '王小虎',
					mobile: '13712345678',
					laiyuan: '陌陌',
					jieduan: '洽谈',
				}, {
					date: '2016-05-03',
					name: '王小虎',
					mobile: '13712345678',
					laiyuan: '百度',
					jieduan: '意向',
				}],
				tableData1: [{
					date: '2016-05-02',
					name: '王小虎',
					title: '为什么我们这么优秀',
					state: '未完成'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					title: '为什么我们这么优秀',
					state: '未完成'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					title: '为什么我们这么优秀',
					state: '未完成'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					title: '为什么我们这么优秀',
					state: '未完成'
				}],
				tableData2: [{
					date: '2016-05-02',
					name: '王小虎',
					title: '为什么我们这么优秀',
					state: '未完成'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					title: '为什么我们这么优秀',
					state: '未完成'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					title: '为什么我们这么优秀',
					state: '未完成'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					title: '为什么我们这么优秀',
					state: '未完成'
				}],
				tableData3: [{
					date: '2016-05-03',
					name: '王小虎',
					title: '为什么我们这么优秀',
					state: '未完成',
					content: '山豆根发射点发生发生'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					title: '为什么我们这么优秀',
					state: '未完成',
					content: '山豆根发射点发生发生'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					title: '为什么我们这么优秀',
					state: '未完成',
					content: '山豆根发射点发生发生'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					title: '为什么我们这么优秀',
					state: '未完成',
					content: '山豆根发射点发生发生'
				}],
				home: {
					customers: [], //客户跟踪表数据
					liable_tasks: [], //我的任务
					my_letters: [], //我收到的站内信
					notepads: [], //记事本数据
					send_letters: [], //我发送的站内信
					send_tasks: [], //我发布的任务
					total_deal: 0, //客户成交数量
					total_duration: 0, //电话拨打数量
					total_friend: 0, //微信好友增加数量
					total_mass: 0, //群发数量
					total_mass_reply: 0, //客户回复数量
					total_moment: 0, //朋友圈发布数量
				}
			}
		},
		mounted() {
			this.loadData();
		},
		methods: {
			loadData() {

			}
		}
	}
</script>

<style lang="scss">
	.home {
		overflow: hidden;
		padding-bottom: 20px;

		.home-huizong {
			margin-top: 15px;

			.box-card {
				text-align: center;

				h1.title {
					line-height: 42px;
					font-size: 16px;
				}

				span.num {
					line-height: 32px;
					font-weight: bold;
					font-size: 28px;
					color: crimson;
				}

				img {
					width: 80px;
					height: 80px;
				}
			}
		}

		.grid-list {
			margin-top: 25px;

			.is-active {
				color: #333333 !important;
				font-weight: bold;
				font-size: 16px;
			}

		}
	}
</style>
